<template>
	<view>
		<!-- 顶部 -->
		<view class="">
			<view class="" style="width: 100vw;display: flex;">				
				<view  style="width: 20vw;align-items: center;display: flex;"><span style="display: inline-block;width: 10rpx;height: 50rpx;background-color: aqua;margin-right: 10rpx;"></span>  办公</view>
				<view class="" >
					<uni-search-bar @confirm="search" v-model="searchValue" @input="input" />
				</view>
			</view>
			
		</view>
		<!-- 中间内容 -->
		<view class="">
			<view class="nav" >
				<view class="navnewt" @click="gotoindex(item)" v-for="(item,index) in datalist" :key="index">
					<view class="navimage">
						<image :src="item.imageurl" mode=""></image>
					</view>
					<view class="">
						{{item.title}}
					</view>
				</view>
			
					
				</view>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				datalist:[
					{id:1,title:"请假申请",imageurl:"../../static/image/home/thr.png"},
					{id:2,title:"考勤打卡",imageurl:"../../static/image/home/thr.png"},
					{id:3,title:"我的绩效",imageurl:"../../static/image/home/thr.png"},
					{id:4,title:"汇报",imageurl:"../../static/image/home/thr.png"},
					{id:5,title:"入职登记",imageurl:"../../static/image/home/thr.png"},
					{id:6,title:"我的培训",imageurl:"../../static/image/home/thr.png"},
					{id:7,title:"我的社保",imageurl:"../../static/image/home/thr.png"},					
					{id:8,title:"更多",imageurl:"../../static/image/home/thr.png"},
				]
			}
		},
		methods: {
			input(res) {
				console.log('----input:', res)
			},
			gotoindex(e){
				switch(e.id) {
					case 1:
					
						uni.navigateTo({
							url:"./AskForList"
						})
					break;
				default:
					// 默认代码块
					uni.showToast({ title: e.title, icon: 'none' });
				
				}
				console.log('gotoindex:', e)	
			}
		}
	}
</script>

<style>
	.nav{
		width: 90vw;		
		margin: 0 auto;
		display:flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.navnewt {
		display: flex;
		flex-direction: column;		
		align-items: center;
		margin: 20rpx;
	}
	
	.navimage image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 15rpx;
	}

</style>